<template>
  <n-spin :show="show">
  <n-menu
      :options="menuOptions"
      :render-icon="renderIcon"
      :render-label="readerLabel"
      default-expand-all
      v-model:value="selectedKey"
  />
  </n-spin>
</template>

<script>
import {h} from "vue";
import {NIcon} from "naive-ui";
import { RouterLink } from "vue-router";
export default {
  name: "MenuBarTemplate",
  data(){
    return{
      show:true,
      selectedKey:'index',
      menuOptions:[
        {
          label: {
            url:'/index/maintainOfCreditCard',
            name:'信用卡管理'
          },
          key: "creditCard",
          icon: 'fa-institution',
          children:[
            {
              label: {
                url:'/index/maintainOfCreditCard',
                name:'信用卡维护'
              },
              key: "maintainOfCreditCard",
              icon: 'fa-credit-card-alt',
            },{
              label: {
                url:'/index/addOfCreditCard',
                name:'信用卡添加'
              },
              key: "addOfCreditCard",
              icon: 'fa-plus',
            },
            {
              label: {
                url:'/index/maintainOfBank',
                name:'银行维护'
              },
              key: "maintainOfBank",
              icon: 'fa-bank',
            },
            {
              label: {
                url:'/index/addOfBank',
                name:'银行添加'
              },
              key: "addOfBank",
              icon: 'fa-plus',
            }
          ]
        },
        {
          label: {
            url:'/index/safeOfUser',
            name:'个人信息维护'
          },
          key: "userMsg",
          icon: 'fa-user',
          children:[
            /*{
              label: {
                url:'/index/maintainOfUser',
                name:'个人信息维护'
              },
              key: "maintainOfUser",
              icon: 'fa-user-o',
            },*/
            {
              label: {
                url:'/index/safeOfUser',
                name:'安全中心'
              },
              key: "safeOfUser",
              icon: 'fa-lock',
            }
          ]
        }
      ],
      adminOption:[
        {
          label: {
            url:'/admin/maintainOfUsers',
            name:'管理员中心'
          },
          key: "adminCenter",
          icon: 'fa-cogs',
          children:[
            {
              label: {
                url:'/admin/maintainOfUsers',
                name:'用户信息维护'
              },
              key: "maintainOfUsers",
              icon: 'fa-cogs',
            }
          ]
        }
      ]

    }
  },
  methods:{
    renderIcon:(option)=>{//图标渲染函数
      return h(NIcon, null, [h('i',{class:'fa '+option.icon})])
    },
    readerLabel:(option)=>{
      return h(RouterLink, {
        to: option.label.url
      }, { default: () => option.label.name })
    },
    loadMenu:function (){
      const key=this.$route.meta.key;
      this.selectedKey=key
    }
  },
  watch:{
    '$route':function (){
      this.loadMenu();
    },
  },
  mounted() {
    const role=localStorage.getItem("role")
    if (role === '1') {
      this.menuOptions=this.menuOptions.concat(this.adminOption)
    }
    this.loadMenu();
    this.show=false;
  },
}
</script>

<style scoped>

</style>